<template>
    <div class=" relative">
        <div class="text-cyan-200 text-xl px-4 flex justify-center">
            <div class=" my-title ">湿度统计</div>
        </div>
        <el-select v-model="curLand" size="small" class="w-[100px] landSelect" @change="landChange">
            <el-option v-for="(item, index) in landList" :key="item.id" :label="item.landName" :value="index"></el-option>
        </el-select>
        <div id="rhchart" class="w-full h-[300px]"></div>
    </div>
</template>
<script setup>
import { weatherDay } from '@/api/datav'
import * as echarts from "echarts"
import { markRaw } from 'vue';
import { listLand } from "@/api/base/land"
const curLand = ref(0)
const pointList = ref(['114.50,36.26', '114.501,36.26'])
const landList = ref([])
const getLandList = async () => {
    const res = await listLand();
    landList.value = res.rows
}
getLandList()

const landChange = async (e) => {
    getWeather(pointList[e])
    myChart.value.dispose()
    initChart()
}
const weatherList = ref([])
const myChart = ref()
async function getWeather(location = pointList.value[0]) {
    const res = await weatherDay({ location, key: '34e05e4dd5d84e7b9fbb5017a7dbea6a' })
    weatherList.value = res.data.daily
}

const initChart = () => {

    const options = {
        color: ["#EE6666"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    color: '#000'
                }
            },
            valueFormatter: (v) => v + '%'
        },
        grid: {
            top: 40,
            left: 10,
            right: 20,
            bottom: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                color: '#fff',
                interval: 0,
                rotate: 30
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                },
                onZero: false
            },
            data: weatherList.value.map(i => i.fxDate),


        },
        yAxis: [
            {
                type: 'value',
                name: '湿度(%)',
                nameTextStyle: {
                    color: '#fff',
                },
                axisLabel: {
                    color: '#fff',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false,
                },
            },

        ],
        series: [
            {
                name: '湿度',
                type: 'line',
                data: weatherList.value.map(i => i.humidity)
            },

        ]
    }

    myChart.value = markRaw(echarts.init(document.getElementById("rhchart")))
    myChart.value.setOption(options)
}
onMounted(async () => {
    await getWeather()
    initChart()
})

window.addEventListener('resize', function () {
    myChart.value.resize()
});

</script>
<style scoped lang="scss">
.my-title {
    background: linear-gradient(to right, hsl(98 100% 62%), hsl(204 100% 59%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.landSelect {
    position: absolute;
    right: 20px;
    top: 0;
}
</style>